<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>菜单详情</title>
  <link rel="stylesheet" href="./css/style.css" />
</head>

<body>
  <h3 class="big-tit">菜谱详情</h3>
  <div class="container flex-box">
    <div class="left">
      <!-- <img src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg" alt="" /> -->
    </div>
    <div class="right">
      <h3>菜谱名称</h3>
      <p>
        <!-- 菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息 -->
      </p>
      <h5>下面列表是菜谱中美味的菜品哦！</h5>
    </div>
  </div>
  <ul class="list-box">
    <!-- <li>
      <a href="detail.html">
        <img src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg" alt="" />
        <h3>菜单名称</h3>
      </a>
    </li> 
     <li>
      <a href="detail.html">
        <img src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg" alt="" />
        <h3>菜单名称</h3>
      </a>
    </li>
    <li>
      <a href="detail.html">
        <img src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg" alt="" />
        <h3>菜单名称</h3>
      </a>
    </li>
    <li>
      <a href="detail.html">
        <img src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg" alt="" />
        <h3>菜单名称</h3>
      </a>
    </li>
    <li>
      <a href="detail.html">
        <img src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg" alt="" />
        <h3>菜单名称</h3>
      </a>
    </li>
    <li>
      <a href="detail.html">
        <img src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg" alt="" />
        <h3>菜单名称</h3>
      </a>
    </li>
    <li>
      <a href="detail.html">
        <img src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg" alt="" />
        <h3>菜单名称</h3>
      </a>
    </li>
    <li>
      <a href="detail.html">
        <img src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg" alt="" />
        <h3>菜单名称</h3>
      </a>
    </li>  -->
  </ul>
  <script src="./axios.js"></script>
  <script>
    //配置地址
    // axios.defaluts.baseURL = 'http://124.223.14.236:3001/api'
    async function fn() {
      let id = location.search.substring(4)
      // console.log(id)
      const { data } = await axios.get(`http://124.223.14.236:3001/api/recipe/${id}`)
      console.log(data)
      let html = ``
      console.log(data.data.img)
      html += `
      <div class="left">
         <img src="http://124.223.14.236:3001/public/${data.data.img}" alt="" /> 
      </div>
      <div class="right">
        <h3>${data.data.name}</h3>
        <p>
         ${data.data.description}
        </p>
  
      </div>
      `
      document.querySelector('.container').innerHTML = html


      const { data: res } = await axios.get(`http://124.223.14.236:3001/api/recipeInfo?recipe_id=${id}`)
      console.log(res.data)
      if (res.data.length > 0) {
        document.querySelector('.noinfo').style.display = 'none'
      }
      const str = res.data.map(item => `
      <li>
      <a href="detail.html?id=${item.id}">
        <img src="http://124.223.14.236:3001/public/${item.img}" alt="" />
        <h3>${item.title}</h3>
      </a>
    </li> 
      `).join('')

      document.querySelector('.list-box').innerHTML = str
    }
    fn()
  </script>
  <p class="noinfo">没有美食哦</p>
</body>

</html>